<script setup lang="ts">
import { NButton, NDivider, NTooltip } from 'naive-ui'
import { Sender } from 'vue-element-plus-x'
import { ref, computed, inject, watch } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { voiceKey } from '../types'
import { CREATE_DIALOG, IMPORT_FILE, IMPORT_IMAGE } from '../utils/constant'
const props = defineProps<{
  isSending: boolean
  fullScreen: boolean
}>()
const senderValue = ref('')
const emit = defineEmits(['createDialog', 'send', 'stop'])

const createDialog = () => {
  emit('createDialog', true)
}

const sendStatus = computed(() => {
  if (props.isSending) {
    return true
  }
  return senderValue.value.trim() !== ''
})

const { toggleVoice, videoText, isVoice } = inject(voiceKey)!
watch(videoText, (newVal) => {
  if (newVal) {
    senderValue.value += newVal
  }
})

const sendMessage = (flag: boolean) => {
  if (!flag && props.isSending) {
    return emit('stop')
  }
  return emit('send', senderValue.value)
}

const clearInput = () => {
  senderValue.value = ''
}

const audioHover = ref(false)

defineExpose({
  clearInput,
})
</script>

<template>
  <div
    class="deepseek-chat-footer h-[142px] bg-[#19264620] rounded-xl mx-auto"
    :class="{ '!w-[784px]': props.fullScreen }"
  >
    <Sender
      placeholder="请输入问题，可通过Shift+回车换行"
      v-model="senderValue"
      variant="updown"
      @submit="sendMessage(true)"
      :auto-size="{ minRows: 3, maxRows: 3 }"
    >
      <template #prefix>
        <n-button quaternary type="info" class="text-[#38F2F4]" @click="createDialog">
          <template #icon>
            <SvgIcon name="edit-outlined" />
          </template>
          {{ CREATE_DIALOG }}
        </n-button>
      </template>
      <template #action-list>
        <div class="flex items-center">
          <n-tooltip placement="top">
            <template #trigger>
              <n-button :disabled="isSending" quaternary type="info" class="text-[#CAD6E8]">
                <template #icon>
                  <SvgIcon class="text-[20px]" name="new-folder-open-outlined" />
                </template>
              </n-button>
            </template>
            <span>{{ IMPORT_FILE }}</span>
          </n-tooltip>
          <n-tooltip placement="top">
            <template #trigger>
              <n-button :disabled="isSending" quaternary type="info" class="text-[#CAD6E8]">
                <template #icon>
                  <SvgIcon class="text-[20px]" name="new-image-outlined" />
                </template>
              </n-button>
            </template>
            <span>{{ IMPORT_IMAGE }}</span>
          </n-tooltip>
          <n-divider vertical />
          <n-button
            :disabled="isSending"
            @click="toggleVoice"
            quaternary
            type="info"
            class="text-[#CAD6E8] mr-2"
            @mouseenter="audioHover = true"
            @mouseleave="audioHover = false"
          >
            <template #icon>
              <SvgIcon v-if="!audioHover && isVoice" class="text-[24px]" name="audio-filled" />
              <SvgIcon v-else class="text-[16px]" name="audio-filled-hover" />
            </template>
          </n-button>
          <n-button
            :disabled="!sendStatus"
            strong
            secondary
            round
            type="info"
            @click="sendMessage(false)"
            class="text-[#CAD6E8] !px-4 send-btn"
          >
            <template #icon>
              <SvgIcon class="text-[16px]" v-if="!isSending" name="send" />
              <SvgIcon class="text-[16px]" v-else name="stop-circle-filled" />
            </template>
          </n-button>
        </div>
      </template>
    </Sender>
  </div>
</template>

<style scoped lang="less">
.deepseek-chat-footer {
  border: 1px solid #ffffff10;

  :deep(.el-sender) {
    border: none;
    border-radius: 0;
    box-shadow: none !important;
    height: 142px;

    .el-textarea__inner::placeholder {
      color: #6a7586;
    }

    .el-textarea__inner {
      color: #f5f9ff !important;
    }
    .n-button {
      height: 24px;
      padding: 0 8px;
    }

    .n-button:not(.n-button--disabled):hover {
      color: #38f2f4;
    }

    .n-divider {
      height: 12px;
      background: #ffffff10;
    }

    .send-btn {
      background: linear-gradient(272deg, rgba(56, 242, 244, 0) 0%, #38f2f4 100%);
      box-shadow: inset 2px 2px 5px 0px rgba(1, 252, 255, 0.3);
    }

    .send-btn.n-button--disabled {
      opacity: 1;
      background: #283658;
      box-shadow: none;
    }
  }
}
</style>
